
<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
        <!-- 添加学科的按钮 -->
        <el-button type="primary" size="small" @click="dialogAddSubVisible=true">新增学科</el-button>
        <!-- 搜索 -->
        <el-row>
          <el-col :span="8">
            <el-input
              clearable
              placeholder="请输入搜索学科的关键字"
              v-model="query.subjectName"
              class="input-with-select"
              @clear="handleInputChange"
            >
              <el-button slot="append" icon="el-icon-search" @click="handleInputChange"></el-button>
            </el-input>
          </el-col>
        </el-row>
        <!-- 数据展示 表格区域 -->
        <el-table :data="subjectList" border style="width: 100%">
          <el-table-column type="index" label="序号"></el-table-column>
          <el-table-column prop="subjectName" label="学科名称"></el-table-column>
          <el-table-column prop="username" label="创建者" width="90px"></el-table-column>
          <el-table-column label="创建日期" width="140px">
            <template slot-scope="scope">{{scope.row.addDate | parseTime}}</template>
          </el-table-column>
          <el-table-column prop="isFrontDisplay" label="前台是否显示">
            <template slot-scope="scope">{{scope.row.isFrontDisplay === 1? '是':'否'}}</template>
          </el-table-column>
          <el-table-column prop="twoLevelDirectory" label="二级目录"></el-table-column>
          <el-table-column prop="tags" label="标签"></el-table-column>
          <el-table-column prop="totals" label="题目数量"></el-table-column>
          <el-table-column label="操作" width="180px">
            <template slot-scope="scope">
              <el-tooltip content="二级目录" placement="top" effect="light">
                <el-button size="mini" circle icon="el-icon-more-outline"
                @click="goDir"></el-button>
              </el-tooltip>
              <el-tooltip content="学科标签" placement="top" effect="light">
                <el-button size="mini" circle icon="el-icon-tickets"></el-button>
              </el-tooltip>

              <el-button circle size="mini" icon="el-icon-edit" @click="editSub(scope.row.id) "></el-button>
              <el-button
                circle
                size="mini"
                type="danger"
                icon="el-icon-delete"
                @click="deleteSub(scope.row.id)"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
          background
          small
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="query.page"
          :page-sizes="[1, 3, 5, 10]"
          :page-size="query.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </el-card>
      <!-- 添加分类对话框 -->
      <el-dialog
        :title="id ? '修改学科':'新增学科'"
        :visible.sync="dialogAddSubVisible"
        width="50%"
        @closed="handleClose"
      >
        <el-form
          ref="AddSubFormRef"
          :model="AddSubForm"
          :rules="AddSubFormRule"
          label-width="100px"
        >
          <el-form-item label="学科名称：" prop="subjectName">
            <el-input v-model="AddSubForm.subjectName"></el-input>
          </el-form-item>
          <el-form-item label="是否显示：" prop="isFrontDisplay">
            <el-switch
              v-model="AddSubForm.isFrontDisplay"
              :width="46"
              :active-value="1"
              :inactive-value="0"
              active-text="开"
              inactive-text="关"
            ></el-switch>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogAddSubVisible = false">取 消</el-button>
          <el-button type="primary" @click="addSubHandle">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { list, add, remove, detail, update } from '../../api/hmmm/subjects.js'
import { parseTime } from '../../filters/index.js'
export default {
  data() {
    return {
      // 请求参数
      query: {
        page: 1,
        pagesize: 3,
        subjectName: ''
      },
      // 学科数据列表
      subjectList: [],
      // 总数据条数
      total: 0,
      // 控制对话框的显示隐藏的标志位
      dialogAddSubVisible: false,
      // 新增学科的表单对象
      AddSubForm: {
        subjectName: '',
        isFrontDisplay: 0
      },
      // 新增学科的表单对象的验证规则
      AddSubFormRule: {
        subjectName: [
          { required: true, message: '请输入名称', trigger: 'blur' }
        ],
        isFrontDisplay: [
          { required: true, message: '请输入名称', trigger: 'blur' }
        ]
      },
      // 修改学科id值
      id: ''
    }
  },
  methods: {
    // 获取学科数据
    async getSubList() {
      const { data: res } = await list(this.query)
      // console.log(res)
      this.subjectList = res.items
      this.total = res.counts
    },
    // pagesize变化的事件处理函数
    handleSizeChange(pages) {
      this.query.pagesize = pages
      this.getSubList()
    },
    // page变化的事件处理函数
    handleCurrentChange(page) {
      this.query.page = page
      this.getSubList()
    },
    // 搜索框按钮点击事件处理函数  表单清空事件处理函数
    handleInputChange() {
      this.getSubList()
      console.log('111')
    },
    // 添加学科的点击事件
    async addSubHandle() {
      if (!this.id) {
        const res = await add(this.AddSubForm)
        console.log(res)
        if (res.status !== 200) return this.$message.error('添加失败')
        this.$message.success('添加成功')
        this.dialogAddSubVisible = false
        this.getSubList()
      } else {
        this.AddSubForm.id = this.id
        const res = await update(this.AddSubForm)
        if (res.status !== 200) return this.$message.error('修改失败')
        this.$message.success('修改成功')
        this.dialogAddSubVisible = false
        this.getSubList()
      }
    },
    // 添加学科对话框关闭时间的回调函数
    handleClose() {
      // console.log(this.$refs)
      this.$refs.AddSubFormRef.resetFields()
      this.id = ''
    },
    // 删除学科的事件处理函数
    deleteSub(id) {
      this.$confirm('将永久删除该学科, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const data = await remove({ id })
          if (data.status !== 200) return this.$message.error('删除失败')
          this.$message.success('删除成功')
          this.getSubList()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 修改学科信息
    async editSub(id) {
      this.id = id
      this.dialogAddSubVisible = true
      const { data: res } = await detail({ id })
      // console.log(data)
      this.AddSubForm.subjectName = res.subjectName
      this.AddSubForm.isFrontDisplay = res.isFrontDisplay
    },
    // 路由跳转
    goDir() {
      this.$router.push('directorys')
    }
  },
  created() {
    this.getSubList()
  }
}
</script>

<style scoped>
.el-row {
  margin: 15px 0;
}
.el-table {
  font-size: 12px;
  margin-bottom: 10px;
}
.el-card {
  min-width: 100%;
}

.el-switch__label--left {
  position: relative;
  left: 46px;
  color: #fff;
  z-index: -1111;
}
.el-switch__label--right {
  position: relative;
  top: 0;
  right: 46px;
  color: #fff;
  z-index: -1111;
}
.el-switch__label--right.is-active {
  z-index: 1111;
  color: #fff !important;
}
.el-switch__label--left.is-active {
  z-index: 1111;
  color: #9c9c9c !important;
}
</style>
